import { isDEV } from "@/utils/isEnv";
import { Button, Dialog, FormControlLabel, Link, Menu, MenuItem, Paper, Radio, RadioGroup, Tooltip } from "@mui/material";
import { useBoolean, useLocalStorageState, useResetState, useSafeState } from "ahooks";
import { Modes } from "../../Modes";
import style from './_index.module.scss';
import { unstable_batchedUpdates } from "react-dom";
import { waitLastEventLoop } from "@/utils";
import { startTransition, useDeferredValue } from "react";
import type { ClickCircleProps } from "@/pages/BCviz/types";
import { colorExamples } from "@/pages/BCviz/colors";
import { first } from "lodash";
const { from } = Array;
const colorNum = 6;
const colorClassName = from(new Array(colorNum)).map((i, ind) => `c${ind + 1}`);
const initColor = first(colorClassName);

export interface UseColors {

  useColors: ReturnType<typeof useLocalStorageState<NonNullable<ClickCircleProps['colors']>>>;
}

export default function ChooseColor ({ useColors: [
  color, setColor,
] }: UseColors) {
  const [isOpen, { setTrue, setFalse }] = useBoolean(
    isDEV ? true :
      false);
  const [chooseColorInd, setChooseColorInd] = useSafeState(color?.toString());
  // const [anchorEl, setAnchorEl, resetAnchorEl] = useResetState<HTMLButtonElement | null>(null);

  return <>
    <Tooltip title={`For ${Modes['Hierarchical Subgraphs Search']}`} arrow><Button
      size="large"
      fullWidth
      onClick={(e) => {
        setTrue();
        // setAnchorEl(e.currentTarget);
      }}
    >{'> '}<Link component="button">Choose Theme</Link></Button></Tooltip>
    <Dialog open={isOpen} fullWidth onClose={setFalse}>
      <Paper elevation={24} className={style['Paper'] ?? ''} >  <RadioGroup value={chooseColorInd}>
        {
          colorClassName.map((classname, ind) => <FormControlLabel control={<Radio />}
            label={<div className={style[classname]} />}
            className={style['Control'] ?? ''}
            value={classname}
            key={classname}
            onChange={(event) => {
              unstable_batchedUpdates(() => {
                const { target } = event;
                if (target instanceof HTMLElement) {
                  const div = target.parentElement?.nextElementSibling?.children[0];
                  if (div instanceof HTMLElement) {
                    const { backgroundImage } = getComputedStyle(div);
                    //linear-gradient(90deg, rgba(255, 128, 128, 0.8), rgba(255, 255, 128, 0.8), rgba(128, 255, 128, 0.8), rgba(128, 255, 255, 0.8), rgba(128, 128, 255, 0.8), rgba(255, 128, 255, 0.8))
                    const colors = from(backgroundImage.matchAll(/rgb.*?\)/g)).map(([c]) => c);
                    setChooseColorInd(colors.toString());
                    setColor(colors);
                  }
                }
              });

            }}
          />)
        }
        {
          colorExamples.map(color => {
            const colorStr = color.join(',');
            return <FormControlLabel control={<Radio />}
              label={<div className={style['ColorBox']}
                style={{
                  'backgroundImage': `linear-gradient(90deg,${colorStr})`
                }}
              />}
              className={style['Control'] ?? ''}
              value={colorStr}
              key={colorStr}
              onChange={(event) => {
                unstable_batchedUpdates(() => {
                  const { target } = event;
                  if (target instanceof HTMLElement) {
                    const div = target.parentElement?.nextElementSibling?.children[0];
                    if (div instanceof HTMLElement) {
                      const { backgroundImage } = getComputedStyle(div);
                      const colors = from(backgroundImage.matchAll(/rgb.*?\)/g)).map(([c]) => c);
                      setChooseColorInd(colors.toString());
                      setColor(colors);
                    }
                  }
                });

              }}
            />;
          })
        }


      </RadioGroup>

      </Paper>


    </Dialog>
  </>

    ;
}